<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%><%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:insertDefinition name="layout">
	<tiles:putAttribute name="head">
		<script type="text/javascript">
			$(function() {

				$(".confirm").confirmDialog(function(data) {
					helper.showMsg(data, {
						okHandler : function() {
							location.reload();
						}
					});
				});

				$(".frame").frameDialog({
					width : 500,
					height : 500
				});

				$("form").Validform({
					ajaxPost : true,
					tiptype : ValidUtils.siblingTip,
					datatype : ValidUtils.types("name", "title"),
					callback : function(data) {
						helper.showMsg(data, {
							okHandler : function() {
								location.reload();
							}
						});
					}
				});

			});

			function selectUser(user) {
				var exists = false;
				$("#users li input").each(function() {
					if (this.value == user.id) {
						exists = true;
						return false;
					}
				});

				if (exists) {
					return;
				}

				var html = [ '<li>', user.name, '(', user.title, ')', '<input name="userId" type="hidden" value="' + user.id +'" />', '<i class="icon-remove"></i>', '</li>' ];

				var inner = $(html.join(''));

				inner.find(".icon-remove").click(function() {
					$(this).closest("li").remove();
					if (!$("#users li input").length) {
						$("#users").hide();
						$("#btn-addUser").hide();
					}
				});

				$("#users").append(inner);
				$("#users").show();
				$("#btn-addUser").show();
			}
		</script>
	</tiles:putAttribute>
	<tiles:putAttribute name="mainBody">
		<ul class="breadcrumb">
			<li><a href="../role/listRole">角色列表</a> <span class="divider">/</span></li>
			<li class="active"><strong>${role.title}</strong>下属人员</li>
		</ul>
			<form action="doAddUserInRole" method="post">
				<a href="../user/selectUser?id=${role.id}" class="frame btn" title="添加下属人员">添加新人员</a>
				<input value="${role.id}" name="roleId" type="hidden" />
				<ul id="users" class="inline well well-small" style="display: none">
				</ul>
				<button type="submit" class="btn btn-primary" id="btn-addUser" style="display: none">
					<i class="icon-ok icon-white"></i>确认
				</button>
			</form> 
		<div>每页${users.size}项，共 ${users.totalElements} 项，当前${users.number+1}/ ${users.totalPages}页</div>

		<table class="table">
			<thead>
				<tr>
					<th>名称</th>
					<th>说明</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<s:iterator value="#users" var="user">
					<tr>
						<td>${user.name}</td>
						<td>${user.title}</td>
						<td><s:url id="doRemoveUserFromRole" value="doRemoveUserFromRole">
								<s:param name="roleId" value="#role.id"></s:param>
								<s:param name="userId" value="#user.id"></s:param>
							</s:url> <a href="${doRemoveUserFromRole}" title="从角色中删除该用户" class="confirm">
								<i class="icon-remove"></i>
							</a></td>
					</tr>
				</s:iterator>
			</tbody>
		</table>
		<jsp:include page="/components/pagination/paginations.jsp"></jsp:include>
	</tiles:putAttribute>
</tiles:insertDefinition>